<template>
    <!-- <Tabs type="card">
        <TabPane label="异常报表">
        </TabPane>
    </Tabs> -->
    <Tabs type="card">
        <TabPane label="异常报表">
            <Card class="no-border-card">
                <!--标题-->
                <p slot="title">
                    异常报表
                </p>
                <!--标题end-->
                <Row :gutter="16" style="margin-bottom:15px;">
                    <Col span="11">
                        <!--搜索条件-->
                        <Select v-model="device_type" style="width:100%" @on-change="resetExceptionType">
                            <Option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </Col>

                    <Col span="11">
                        <Select v-model="exception_type" style="width:100%" v-show="list2.length" @on-change="getData(1)">
                            <Option v-for="item in list2" :value="item.type" :key="item.description">{{ item.description }}</Option>
                        </Select>
                    </Col>

                    <Col span="2">
                        <Button type="primary" icon="ios-search-strong" style="padding:4px 0px 3px;" @click="getData(1)"></Button>
                        <!--搜索条件end-->
                    </Col>
                </Row>

                <!--异常报表数据-->
                <Table stripe border :columns="columns" :data="datas" :loading="isLoading"></Table>
                <!--异常报表数据end-->


                <!--分页-->
                <Page :total="total"
                :page-size="size"
                :current.sync="currentPage"
                show-elevator
                @on-change="getData"
                show-total style="text-align:center">
                </Page>
                <!--分页end-->
            </Card>

            <!-- 选择弹窗 -->
            <Modal
                v-model="isModalVisible"
                class-name="vertical-center-modal"
                :closable="false"
                :mask-closable="false"
                title="请选择核查设备类型及异常类型"
                width="480">

                <Form :label-width="80" style="margin-top:20px;padding-right:10px">
                    <FormItem label="设备类型">
                        <Select v-model="device_type"  @on-change="resetExceptionType">
                            <Option v-for="item in list1" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="异常类型">
                        <Select v-model="exception_type" placeholder="请选择异常类型">
                            <Option v-for="item in list2" :value="item.type" :key="item.description">{{ item.description }}</Option>
                        </Select>
                    </FormItem>
                </Form>

                <div slot="footer" style="padding:10px 0">
                    <Button type="primary" @click="closeResultModal">确定</Button>
                </div>
            </Modal>
        </TabPane>
    </Tabs>
</template>

<script>
import util from '@/libs/util'
import { DeviceTypeEnum, AbnormalEvents } from '@/libs/const'
import { http, api } from '@/libs/http'

export default {
  name: 'abnormal_report',
  data () {
    return {
      isModalVisible: true,
      columns: [
        // 异常报表表头
        {
          title: '设备名称',
          align: 'center',
          minWidth: 100,
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              obj.row.description || DeviceTypeEnum.properties[obj.row.device_type].name
            )
          }
        },
        {
          title: '设备类型',
          minWidth: 100,
          align: 'center',
          render (createElement, obj) {
            return createElement(
              'span', // 标签名称
              DeviceTypeEnum.properties[obj.row.device_type].name
            )
          }
        },
        // {
        //     title: '异常类型',
        //     minWidth: 100,
        //     align: 'center',
        //     render: (createElement, obj) => {
        //         return createElement(
        //             'span', // 标签名称
        //             AbnormalEvents[this.exception_type]
        //         )
        //     }
        // },
        {
          title: '房源地址',
          minWidth: 250,
          align: 'center',
          render: (h, p) => {
            if (!p.row.home) return null
            return (
              <span
                style='cursor: pointer'
                onClick={() => this.goToHomeDetail(p.row.home)}>
                {util.concatLocation(p.row.home)}
              </span>
            )
          }
        },
        {
          title: '房间号',
          minWidth: 100,
          align: 'center',
          render: (createElement, obj) => {
            return createElement(
              'div', // 标签名称
              {
                style: {
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.goToRoomDetail(obj.row.home, obj.row.room)
                  }
                }
              },
              obj.row.room.room_name
            )
          }
        },
        // {
        //     title: '租客',
        //     minWidth: 120,
        //     align: 'center',
        //     render(createElement, obj) {
        //         if (!obj.row.room.leases[0]) {
        //             return createElement('div', '-')
        //         }

        //         return createElement(
        //             'div', // 标签名称
        //             [
        //                 createElement('div', obj.row.room.leases[0] && obj.row.room.leases[0].tenant.name),
        //                 createElement('div', obj.row.room.leases[0] && obj.row.room.leases[0].tenant.phone)
        //             ]
        //         )
        //     }
        // },
        {
          title: '操作',
          minWidth: 100,
          align: 'center',
          render: (createElement, obj) => {
            return createElement(
              'span', // 标签名称
              {
                class: {
                  textActive: true
                },
                on: {
                  click: () => {
                    this.goToDeviceDetail(obj.row)
                  }
                }
              },
              '查看设备'
            )
          }
        }
      ],
      datas: [],
      device_type: 0,
      exception_type: 1006, // 异常类型,默认为设备离线
      list1: [
        {
          value: 0,
          label: '全部设备'
        },
        {
          value: 'GATEWAY',
          label: '网关'
        },
        {
          value: 'LOCK',
          label: '门锁'
        },
        {
          value: 'ELEMETER',
          label: '电表'
        },
        {
          value: 'ELECOLLECTOR',
          label: '采集器'
        },
        {
          value: 'WATERMETER_HOT',
          label: '热水表'
        },
        {
          value: 'WATERMETER_COLD',
          label: '冷水表'
        },
        {
          value: 'WATERGATEWAY',
          label: '水表网关'
        },
        {
          value: 'FACE_ACCESS',
          label: '人脸门禁'
        },
        {
          value: 'ACCESS_CONTROL',
          label: 'M3门禁'
        }
      ],
      isLoading: true,
      size: 10,
      total: 0,
      currentPage: 1
    }
  },
  mounted () {},
  computed: {
    list2 () {
      if (this.device_type) {
        return AbnormalEvents[this.device_type].filter(code => code.type !== 5001)
      } else {
        return [
          { type: 1006, description: '设备离线' },
          { type: 100, description: '设备过保' },
          { type: 3001, description: '流量超额' },

          { type: 1001, description: '门锁低电' },
          { type: 1003, description: '门锁被撬' },
          { type: 1008, description: '长时间未开门' },
          { type: 1009, description: '长时间未锁门' },
          // { type: 1004, description: '密码错误' },

          // { type: 2003, description: '超电量跳闸' },
          // { type: 2004, description: '超功率跳闸' },
          // { type: 2005, description: '本地合闸' },
          // { type: 2007, description: '超电流跳闸' },
          // { type: 2014, description: '远程合闸' },
          { type: 2006, description: '接线异常' },
          { type: 2013, description: '电表断电' },

          { type: 3002, description: '电表欠费' }
          // { type: 5001, description: '水表跳变' }
        ]
      }
    }
  },
  methods: {
    getData (page) {
      if (page === 1) {
        this.currentPage = 1
      }
      if (!this.exception_type) {
        this.$Message.error('请选择异常类型')
        return
      }
      let params = {
        limit: this.size,
        offset: this.size * (page - 1),
        exception_type: this.exception_type
      }
      const apiMap = {
        100: api.device_exception,
        1003: api.device_exception,
        1008: api.device_exception,
        1009: api.device_exception
      }
      const apiPath = apiMap[this.exception_type] || api.device_exception_report
      if (this.device_type) {
        params.device_type = DeviceTypeEnum[this.device_type]
      }
      this.isLoading = true
      http.request(this, apiPath, null, params, res => {
        if (res) {
          const data = res.devices || res.rows
          data.forEach(item => {
            if (item.room && item.room.home) item.home = item.room.home
          })
          this.datas = data
          this.total = res.count || 0
        }
        this.isLoading = false
      })
    },

    goToDeviceDetail (device) {
      const homeId = (device.home && device.home.id) || (device.room && device.room.home_id)
      const roomId = device.room.id
      const roomName = device.room.room_name
      const deviceType = device.device_type
      const deviceId = device.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {
          roomId,
          deviceType,
          deviceId,
          roomName
        }
      })
    },

    goToRoomDetail (home, room) {
      const homeId = home.id
      const roomId = room.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`,
        query: {
          roomId
        }
      })
    },

    goToHomeDetail (home) {
      const homeId = home.id
      this.$router.push({
        path: `/tenancy-device/${homeId}`
      })
    },

    resetExceptionType (v) {
      this.exception_type = 1006
    },

    closeResultModal () {
      if (!this.exception_type) {
        this.$Message.error('请选择异常类型')
        return
      }
      this.isModalVisible = false
      this.getData(1)
    }
  }
}
</script>

<style lang="less">
.textActive {
    color: #05bac5;
    cursor: pointer;
}
</style>